<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="content-section" th:fragment="content">
    <h2><i class="fas fa-hospital"></i> 科室病房情况</h2>
    <div class="ward-container">
        <div class="ward-filters">
            <select id="floorSelect" class="ward-select">
                <option value="">选择楼层</option>
            </select>
        </div>
        <div class="ward-table">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>楼层</th>
                        <th>病房号</th>
                        <th>总床位数</th>
                        <th>可用床位数</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="wardTableBody">
                </tbody>
            </table>
        </div>
    </div>

    <!-- 护士信息模态框 -->
    <div id="wardNursesModal" class="modal-overlay" style="display: none;">
        <div class="modal-wrapper">
            <div class="modal-content">
                <h3>负责护士</h3>
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>工号</th>
                            <th>姓名</th>
                            <th>性别</th>
                            <th>联系电话</th>
                        </tr>
                    </thead>
                    <tbody id="nurseTableBody">
                        <!-- 护士信息将在这里动态加载 -->
                    </tbody>
                </table>
            </div>
            <button class="modal-close" onclick="closeModal()">关闭</button>
        </div>
    </div>
</div>

<script th:inline="javascript">
$(document).ready(function() {
    // 加载楼层列表
    loadFloors();
    // 加载所有病房数据
    loadAllWards();

    // 监听楼层选择变化
    $('#floorSelect').change(function() {
        updateWards();
    });

    // 添加样式
    $('<style>').text(`
        .mr-2 {
            margin-right: 1rem;
        }
        .view-link {
            color: #007bff;
            text-decoration: none;
            cursor: pointer;
        }
        .view-link:hover {
            text-decoration: underline;
        }
        .text-center {
            text-align: center;
        }
    `).appendTo('head');
});

function loadFloors() {
    $.ajax({
        url: /*[[@{/doctor/ward-status/floors}]]*/ '',
        method: 'GET',
        success: function(response) {
            if (response && Array.isArray(response)) {
        var select = $('#floorSelect');
                select.empty();
                select.append($('<option>', {
                    value: '',
                    text: '选择楼层'
                }));
                response.forEach(function(floor) {
            select.append($('<option>', {
                value: floor,
                text: floor + '楼'
            }));
        });
            }
        },
        error: function(xhr) {
            if (xhr.status === 401) {
                window.location.href = /*[[@{/doctor/auth/login}]]*/ '';
            } else {
                alert('加载楼层信息失败');
            }
        }
    });
}

function updateWards() {
    var floorNum = $('#floorSelect').val();
    $.ajax({
        url: /*[[@{/doctor/ward-status/wards}]]*/ '',
        method: 'GET',
        data: floorNum ? { floorNum: floorNum } : {},
        success: function(response) {
            if (response && Array.isArray(response)) {
                updateWardTable(response);
            }
        },
        error: function(xhr) {
            if (xhr.status === 401) {
                window.location.href = /*[[@{/doctor/auth/login}]]*/ '';
    } else {
                alert('加载病房信息失败');
    }
        }
    });
}

function loadAllWards() {
    $.ajax({
        url: /*[[@{/doctor/ward-status/all}]]*/ '',
        method: 'GET',
        success: function(response) {
            if (response && response.wards) {
                updateWardTable(response.wards);
            }
        },
        error: function(xhr) {
            if (xhr.status === 401) {
                window.location.href = /*[[@{/doctor/auth/login}]]*/ '';
            } else {
                alert('加载病房信息失败');
            }
        }
    });
}

function updateWardTable(wards) {
    var tbody = $('#wardTableBody');
    tbody.empty();

    wards.forEach(function(ward) {
        var row = $('<tr>', {
            'data-ward-id': ward.wardId
        });
        row.append($('<td>').text(ward.floorNum + '楼'));
        row.append($('<td>').text(ward.wardNum + '号'));
        row.append($('<td>').text(ward.bedCount));
        row.append($('<td>').text(ward.availableBeds));
        
        var actionCell = $('<td>');
        // 查看病房按钮
        var viewLink = $('<a>', {
            href: 'javascript:void(0)',
            text: '查看病房',
            class: 'view-link mr-2',
            click: function() {
                viewWardDetail(ward.wardId, ward.floorNum, ward.wardNum);
            }
        });
        // 查看护士按钮
        var viewNursesLink = $('<a>', {
            href: 'javascript:void(0)',
            text: '查看护士',
            class: 'view-link',
            click: function() {
                viewWardNurses(ward.wardId, ward.floorNum, ward.wardNum);
            }
        });
        
        actionCell.append(viewLink).append(' | ').append(viewNursesLink);
        row.append(actionCell);
        tbody.append(row);
    });
}

function viewWardDetail(wardId, floorNum, wardNum) {
    $.ajax({
        url: /*[[@{/doctor/ward-status/detail}]]*/ '',
        method: 'GET',
        data: { wardId: wardId },
        success: function(response) {
            if (response) {
                showWardDetailModal(response, floorNum, wardNum);
            }
        },
        error: function(xhr) {
            if (xhr.status === 401) {
                window.location.href = /*[[@{/doctor/auth/login}]]*/ '';
            } else {
                alert('获取病房详情失败');
            }
        }
    });
}

function showWardDetailModal(beds, floorNum, wardNum) {
        var modalContent = '<div class="modal-content">' +
            '<h3>' + floorNum + '楼 ' + wardNum + '号病房床位信息</h3>' +
            '<table class="data-table">' +
            '<thead><tr>' +
            '<th>床位号</th>' +
            '<th>状态</th>' +
            '<th>病人姓名</th>' +
            '</tr></thead><tbody>';
            
        beds.forEach(function(bed) {
            modalContent += '<tr>' +
                '<td>' + bed.bedNum + '号床</td>' +
                '<td>' + (bed.bedStatus === 1 ? '入住' : '空闲') + '</td>' +
                '<td>' + (bed.patientName || '-') + '</td>' +
                '</tr>';
        });
        
        modalContent += '</tbody></table></div>';
        showModal(modalContent);
}

function showModal(content) {
    $('.modal-overlay').remove();
    var modalHtml = '<div class="modal-overlay">' +
        '<div class="modal-wrapper">' +
        content +
        '<button class="modal-close" onclick="closeModal()">关闭</button>' +
        '</div></div>';
    $('body').append(modalHtml);
}

function closeModal() {
    $('.modal-overlay').hide();
}

function viewWardNurses(wardId, floorNum, wardNum) {
    $.ajax({
        url: /*[[@{/doctor/ward-status/ward-nurses}]]*/ '',
        method: 'GET',
        data: { wardId: wardId },
        success: function(nurses) {
            if (Array.isArray(nurses)) {
                const tbody = $('#nurseTableBody');
                tbody.empty();
                
                if (nurses.length === 0) {
                    tbody.html('<tr><td colspan="4" class="text-center">暂无护士分配到该病房</td></tr>');
                } else {
                    nurses.forEach(function(nurse) {
                        const row = $('<tr>');
                        row.html(`
                            <td>${nurse.nurseId || '-'}</td>
                            <td>${nurse.nurseName || '-'}</td>
                            <td>${nurse.nurseGender || '-'}</td>
                            <td>${nurse.nursePhone || '-'}</td>
                        `);
                        tbody.append(row);
                    });
                }
                
                $('#wardNursesModal').show();
            }
        },
        error: function(xhr) {
            if (xhr.status === 401) {
                window.location.href = /*[[@{/doctor/auth/login}]]*/ '';
            } else {
                alert('获取护士信息失败');
            }
        }
    });
}
</script>
</body>
</html> 